<template>

    <div id="map" class="content"></div>
  
</template>

<script setup lang="ts">

import { useListStore } from '@/stores/index'
import { onMounted } from 'vue'
import * as echarts from 'echarts' 
import '@/assets/china'
import { setOption as mapSetOption } from './setOption'
import { geoCoordMap } from '@/assets/geoMap'
import {compareFn } from '@/utils/compareFn'
const store = useListStore()


onMounted(async () => {

  await store.getList()
  console.log('mapmounted')
  // console.log('store', store)
  // console.log('store.list.diseaseh5Shelf.areaTree[0]',store.list.diseaseh5Shelf.areaTree[0])
  initEcharts()
})


// 中间地图初始化
const initEcharts = () => {
  // console.log('store.list.diseaseh5Shelf.areaTree[0]', store.list.diseaseh5Shelf.areaTree[0])
  const cities = store.list.diseaseh5Shelf.areaTree[0].children
  // console.log('cities', cities)
  //data就是地图上的数据
  const data = cities.map((v) => {
    // console.log('v.name', v.name)
    // console.log('v.name', v.name,'geoCoordMap[v.name].concat(v.total.nowConfirm)',geoCoordMap[v.name].concat(v.total.nowConfirm))
    return {
      name: v.name,
      value: geoCoordMap[v.name].concat(v.total.nowConfirm),
      children: v.children,
    }
  })

  // 右侧面板默认显示的省份
  store.item = cities[24].children.sort(compareFn('adcode'))


  // 渲染位置
  const charts = echarts.init(document.querySelector('#map')!)
  // 渲染选项
  charts.setOption(mapSetOption(data))
  // 渲染完成后的事件
  charts.on('click', (e: any) => {
    // console.log(e.data.children)
    store.item = e.data.children.sort(compareFn('adcode'))
  })
}


</script>

<style scoped lang="scss">


.content {
      width: 100%;
      height: auto;
      aspect-ratio: 4/3;
    }
</style>